<template>
  <div class="page-c rank">
    <div class="cover">
      <img :src="coverImgUrl" :alt="coverImgUrl" />
    </div>
    <div class="s-list">
      <div class="ite" v-for="(item,index) in songList" :key="index" @click.stop="toplay(item.id)">
        <div class="num">{{index+1}}</div>
        <div class="mes">
          <h4 class="song">{{item.name}}</h4>
          <h6 class="singer">{{item.ar[0].name}}</h6>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Rank",
  data() {
    return {
      idx: "",
      coverImgUrl: "",
      coverImg: "",
      songList: []
    };
  },
   methods:{
      toplay(id) {
      this.$router.push({
        path: "./play",
        name: "Play",
        params: {
          id:id
        }
      });
    },
  },
  mounted() {
    this.idx = this.$route.params.idx;
    this.$axios({
      url: this.$URL.BASE_URL + "/top/list",
      params: {
        idx: this.idx,
      }
    })
      .then(res => {
        console.log(res.data.playlist.tracks);
        this.songList = res.data.playlist.tracks.map(v => {
          return v;
        });
        this.coverImgUrl = res.data.playlist.tracks[0].al.picUrl;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style lang="scss" scoped>
.cover {
  width: 100%;
  background-image: url({{coverImgUrl}});
  height: 220px;
  img {
    width: 100%;
    height: 100%;  //  transform: scale();
  }
}
.s-list {
  .ite {
    height: 70px;
    padding: 10px 20px;
    background-color: #181818;
    box-sizing: border-box;
    display: flex;
    .num {
      line-height: 50px;
      text-align: center;
      margin-right: 40px;
    }
    .mes {
      display: flex;
      flex-direction: column;
      justify-content: center;
      h4 {
        font-size: 14px;
        font-weight: lighter;
      }
      h6 {
        font-weight: lighter;
      }
    }
  }
}
</style>